<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,address=no"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../css/zy_common.css"/>
    <link rel="stylesheet" href="../css/zy_base.css"/>
</head>
<body>
<div class="bdb bw plr24 ptb30">
    <p class="col3 font15" id="macno"></p>
    <p class="col9 font13 mt10" id="times"></p>
</div>
    <section class="ptb30 mt20 bw">
        <div id="viewShowMain" class="plr24" style="background: #fff;height: 6rem"></div>
    </section>
</body>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/dlc.js"></script>
<script src="../js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    var data1=[],data2=[],data3=[],data4=[];
    $(function () {
        $('#macno').text('设备编号：'+getUrlParam('macno'));
        $('#times').text(format(getLocalData('device_times'),'Y-m-d H:i:s'));
        //列表
        dlctipbox.loading('请稍后');
        dlc_request('/api/deviceIncomeTotal/getDeviceIncomeTotalList',{deviceNo:getUrlParam('macno'),page:1,limit:999},function (res) {
            console.log(res);
            dlctipbox.clear();
            if(res.code==1){
                res.data.list.forEach(function (item,index) {
                    data1.push(item.payPaperSum);
                    data2.push(item.gzhIncomeSum);
                    data3.push(item.incomeTotal);
                    data4.push(format(item.createTime,'Y-m-d'));
                });
                console.log(data1);
                console.log(data2);
                console.log(data3);
                console.log(data4);
                if(res.data.list.length==0){
                    $('#viewShowMain').parent().removeClass('bw');
                    $('#viewShowMain').css('background','none');
                    $('#viewShowMain').html(emptyTip('暂无数据'));
                }else{
                    echart(data1, data2, data3,data4);
                }

            }
        });
    });
//        var data1 = [120, 132, 101, 134, 90, 230, 210];
//        var data2 = [100, 300, 200, 100, 90, 100, 200];
//        var data3 = [200, 555, 400, 50, 500, 300, 100];
//        var data4= ['05-10','05-11','05-12','05-13','05-14','05-16','05-17'];
//    echart(data1, data2, data3,data4);

    function echart(data1, data2,data3,data4) {
        var myChart = echarts.init(document.getElementById('viewShowMain'));
        option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['商品收益', '佣金收益','公众号收益','日总收益'],
            },
            grid: {
                left: '8%',
                right: '5%',
                bottom: '22%',
                containLabel: false
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data4,
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}',
                },
                axisLine: {
                    lineStyle: { color: '#999' }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.8)'
                    }
                },
                boundaryGap: false,
                data: ['0', '1', '2', '3', '4', '5','6','7','8']
            },
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 100
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 0,
                    end: 100
                }
            ],
            series: [{
                name: '商品收益',
                type: 'line',
                "itemStyle": {
                    "normal": {
                        "color": "#7cc0f0",
                    }
                },
                label: {
                    normal: {
                        show: true,
                        color: '#000',
                        position: 'top'
                    }
                },
                data: data1,

            },
                {
                    name: '公众号收益',
                        type: 'line',
                    "itemStyle": {
                    "normal": {
                        "color": "#feea7e",
                    }
                },
                    label: {
                        normal: {
                            show: true,
                                color: '#000',
                                position: 'top'
                        }
                    },
                    data: data2,

                },
                {
                    name: '日总收益',
                    type: 'line',
                    "itemStyle": {
                        "normal": {
                            "color": "#fb6d74",
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            color: '#000',
                            position: 'top'
                        }
                    },
                    data: data3,

                }
            ]
        };
        myChart.setOption(option);
    }
</script>